<template>
  <!-- 我的收藏 -->
  <div class="box">
    <heads></heads>
    <titlesearch></titlesearch>
    <div class="zbc" v-if="zbc">
      <div class="shangjia" v-if="shangjiaShow">
        <p>确定要清除当前上门看过的浏览记录吗？</p>
        <div class="d1" @click="guanShangjia">取消</div>
        <div class="d2" @click="quedingShangjia">确定</div>
      </div>
    </div>
    <div class="gerenBox">
      <ceList :index="22"></ceList>
      <div class="con">
        <div class="one-tab no-padding" v-if="(userInfo.isAgent == 1 &&
          userInfo.businessType == 1 &&
          userInfo.shopType != 2) ||
          (userInfo.isShop == 1 &&
            userInfo.businessType == 2 &&
            (userInfo.shopType != 3 || userInfo.shopType != 4)) ||
          (userInfo.isAgent == 1 && userInfo.businessType != 1)
          ">
          <div class="one-tab-left ">
            <div v-if="userInfo.shopType != 4":class="oneLevelTab == 1 ? 'active' : ''" class="one-tab-item " @click.stop="oneLevel(1)">
              带客看过
            </div>
            <div :class="oneLevelTab == 2 ? 'active' : ''" class="one-tab-item " @click.stop="oneLevel(2)">
              我看过谁
            </div>
          </div>
          <div class="one-tab-right">
            <template v-if="checkboxShow">
              <div class="one-tab-right-btn" @click="shangjia">
                删除
              </div>
              <div class="one-tab-right-btn" @click="binaji">
                完成
              </div>
            </template>
            <template v-else>
              <div class="one-tab-right-btn" @click="binaji">
                管理
              </div>
            </template>
          </div>
        </div>
        <div class="oneoneone-tab" v-if="((userInfo.isAgent == 1 &&
          userInfo.businessType == 1 &&
          userInfo.shopType != 2) ||
          (userInfo.isShop == 1 &&
            userInfo.businessType == 2 &&
            (userInfo.shopType != 3 || userInfo.shopType != 4)) ||
          (userInfo.isAgent == 1 && userInfo.businessType != 1))
          && oneLevelTab == 2">
          <div v-for="(item, index) in tabbar" :class="curIndex == index ? 'active' : ''" class="tab-item" :key="index"
            @click.stop="tabClick(index)">
            {{ item }}
          </div>
        </div>
        <div class="one-tab no-padding" v-if="userInfo.businessType == '0' || !userInfo.businessType">
          <div class="one-tab-left">
            <div v-for="(item, index) in tabbar" :class="curIndex == index ? 'active' : ''" class="one-tab-item"
              :key="index" @click.stop="tabClick(index)">
              {{ item }}
            </div>
          </div>
          <div class="one-tab-right">
            <template v-if="checkboxShow">
              <div class="one-tab-right-btn" @click="shangjia">
                删除
              </div>
              <div class="one-tab-right-btn" @click="binaji">
                完成
              </div>
            </template>
            <template v-else>
              <div class="one-tab-right-btn" @click="binaji">
                管理
              </div>
            </template>
          </div>
        </div>
        <!-- <div class="leibie">
          <div class="anniu" style="display:flex;align-items: center;">
            <div
              v-for="(item, index) in tabbar"
              :class="curIndex == index ? 'anniu-ac active' : ''"
              :key="index"
              @click.stop="tabClick(index)"
            >
              {{ item }}
            </div>
          </div>
          <div class="anniu_right">
            <span class="guanli" @click="binaji">{{
              checkboxShow ? "完成" : "管理"
            }}</span>
            <div class="qxsc" v-if="checkboxShow" @click="shangjia">删除</div>
          </div>
        </div> -->

        <div>
          <div class="cheClass" :class="checkboxShow ? 'my' : ''" style="display: flex;cursor: pointer;"
            v-for="(item, index) in collectList" :key="index">
            <template v-if="checkboxShow && curIndex != 2">
              <div v-if="!item.choose"
                style="font-size: 50px;line-height: 154px;color: #D1D1D1;margin-right: 10px;cursor: pointer;"
                @click="choosehouse(item.id)">
                ○
              </div>
              <p v-else class="el-icon-success"
                style="font-size: 30px;line-height: 154px;color: #64B6A8;margin-right: 10px;cursor: pointer;"
                @click="choosehouse(item.id)"></p>
            </template>
            <template v-if="curIndex == 0">
              <img style="object-fit: contain;width: 230px;height: 154px;" :src="item.vehicleCoverPicture" />

              <img class="shangb" src="../../../assets/haveDeleted.png" v-if="item.deleteFlag == 1" />
              <img class="shangb" src="../../../assets/beenSold.png" v-else-if="item.saleStatus == 1" />

              <img class="shangb" src="../../../assets/grounding.png" v-else-if="item.shelfStatus == 1" />
              <img class="shangb" src="../../../assets/removeShelves.png" v-else-if="item.shelfStatus == 0" />
              <div class="li_right">
                <div class="nameList" @click="details(item)">
                  <div class="t_1">
                    <tag-view :item="item"></tag-view>{{
                      item.vehicleBrandModel
                      ? (item.vehicleBrandModel.split("|")[0] || "") +
                      " " +
                      (item.vehicleBrandModel.split("|")[1] || "")
                      : ""
                    }}
                    {{ item.model ? item.model + "/" : "" }}
                    {{
                      item.bodyStructureDoors +
                      "门" +
                      item.bodyStructureSeat +
                      "座" +
                      item.bodyStructureVehicle +
                      "车"
                    }}
                  </div>
                  <div class="t_2">
                    <span>{{
                      item.mileage
                      ? +item.mileage >= 10000
                        ? +(item.mileage / 10000).toFixed(1) + "万公里/"
                        : item.mileage + "公里/"
                      : ""
                    }}{{
  item.licensingTimeYear
  ? item.licensingTimeYear + "年"
  : ""
}}</span>
                  </div>
                  <div class="t_4">
                    <img class="t_4_img" style="border-radius: 31px;" :src="item.userInformation
                          ? item.userInformation.image ||
                          'https://pic.bangbangtongcheng.com/static/my/header.png'
                          : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                        " />
                    <span style="cursor: pointer;" @click.stop="toAgent(item)">{{
                      item.userInformation
                      ? item.userInformation.nikeName || "未命名用户"
                      : "未命名用户"
                    }}</span>
                    <div style="cursor: pointer;" @click.stop="shopdetails(item)">
                      {{
                        item.distributor
                        ? item.distributor.storeName
                        : "个人车源"
                      }}
                    </div>
                  </div>
                </div>
                <div class="li_right_price">
                  {{
                    item.intervalPrice && item.intervalPrice != ""
                    ? item.intervalPrice.indexOf("-") > -1
                      ? item.intervalPrice.split("-")[0] +
                      "万-" +
                      item.intervalPrice.split("-")[1] +
                      "万"
                      : ""
                    : item.price + "万"
                  }}
                </div>
              </div>
            </template>
            <template v-if="curIndex == 1">
              <!-- <template v-if="checkboxShow">
									<div v-if="!item.choose" style="font-size: 50px;line-height: 154px;color: #D1D1D1;margin-right: 10px;cursor: pointer;" @click="choosehouse(item.id)">○</div>
									<p v-else class="el-icon-success" style="font-size: 30px;line-height: 154px;color: #64B6A8;margin-right: 10px;cursor: pointer;" @click="choosehouse(item.id)"></p>
								</template> -->
              <!-- <el-checkbox v-model="item.choose" :key="index" v-if="checkboxShow"></el-checkbox> -->
              <div class="li" style="display:flex;">
                <img class="img" @click="details(item)" style="object-fit: contain;background-color: #00000033;" :src="item.displayDiagram ||
                  item.display_diagram ||
                  (item.houseImage && item.houseImage.split('|')[0]) ||
                  (item.house_image && item.house_image.split('|')[0])
                  " />
                <img class="shangb" src="../../../assets/haveDeleted.png" v-if="item.delFlag == 1" />
                <img class="shangb" src="../../../assets/beenSold.png"
                  v-else-if="item.status == 1 && item.transactionType == 2" />
                <img class="shangb" src="../../../assets/beenLease.png"
                  v-else-if="item.status == 1 && item.transactionType == 1" />
                <img class="shangb" src="../../../assets/grounding.png"
                  v-else-if="item.status == 0 && item.upStatus == 1" />
                <img class="shangb" src="../../../assets/removeShelves.png" v-else-if="item.upStatus == 0" />
                <div class="wenzi">
                  <p class="p1" style="cursor: pointer;" @click="details(item)">
                    <tag-view :item="item"></tag-view>{{ item.title }}
                  </p>
                  <p class="p2 line1" @click="details(item)">
                    {{ item.region }} {{ item.address }}
                  </p>
                  <p class="p3" @click="details(item)">
                    <span>{{ item.houseType }}</span>
                    <span>{{ item.area }}m²</span>
                    <span>{{ item.floor }}</span>
                  </p>
                  <p class="p4">
                    <img @click.stop="toAgent(item)" :src="item.userInformation
                      ? item.userInformation.image ||
                      'https://pic.bangbangtongcheng.com/static/my/header.png'
                      : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                      " />

                    <span @click.stop="toAgent(item)"
                      style="margin-left: 7px;max-width: 100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{
                        item.userInformation
                        ? item.userInformation.nikeName || "未命名用户"
                        : "未命名用户"
                      }}</span>
                    <span class="gong" @click.stop="shopdetails(item)">{{
                      item.shopInfo
                      ? item.shopInfo.shopName || "未知房产"
                      : "个人房源"
                    }}</span>
                  </p>
                </div>
                <div class="jiage">
                  <p class="p1" v-if="item.transactionType == 1">
                    {{ item.price }}元
                  </p>
                  <p class="p1" v-if="item.transactionType == 2">
                    {{ item.price }}万
                  </p>
                  <p class="p2" v-if="item.transactionType == 2">
                    {{ ((item.price * 10000) / item.area).toFixed(2) }}元/m²
                  </p>
                </div>
              </div>
            </template>
            <template v-if="curIndex == 2">
              <div class="li" style="margin-right: 40px;display:flex;margin-top:-20px;margin-bottom:0px;">
                <div class="box-check invite" v-show="checkboxShow">
                  <el-checkbox :value="item.choose" @change="choosehouse(item.id)"></el-checkbox>
                </div>
                <invite-item :key="index" :item="item" line from="view"></invite-item>
              </div>
            </template>
          </div>
          <div class="li" v-if="collectTotal == 0" style="width: 100%;height: 400px;">
            <el-empty :description="curIndex == 0
              ? '还没有上门看过车源'
              : curIndex == 1
                ? '还没有上门看过房源'
                : '还没有上门看过职位'
              "></el-empty>
          </div>
          <div class="fenye">
            <el-pagination background layout="prev, pager, next" :total="collectTotal" :current-page="collectPage.pageNo"
              :page-size="collectPage.pageSize" @current-change="CollectCurrentChange"></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <floor></floor>
    <chat ref="chats"></chat>
  </div>
</template>
<script>
import floor from "../../../components/floor";
import heads from "../../../components/head";
import ceList from "../../../components/ceList.vue";
import titlesearch from "../../../components/titlesearch.vue";
import chat from "../../../components/chat.vue";
import inviteItem from "@/views/invite/comp/item.vue";
export default {
  components: {
    floor,
    heads,
    ceList,
    titlesearch,
    chat,
    inviteItem
  },
  data() {
    return {
      curIndex: 0,
      tabbar: ["车源", "房源", "招聘"],
      shouyeShow: false,
      shangjiaShow: false,
      xuan: 4,
      leibie: 1,
      radioCities: "",
      checkboxShow: false,
      user: {},
      collectPage: {
        pageSize: 3,
        pageNo: 1,
        userId: ""
      },
      collectList: [],
      collectTotal: 0,
      select: false,
      ids: [],
      zbc: false,
      shangjiaShow: false,
      userInfo: {},
      oneLevelTab: 2
    };
  },
  created() {
    this.getUser();
    if (
      (this.userInfo.isAgent == 1 && this.userInfo.businessType == 1 && this.userInfo.shopType != 2) ||
      (this.userInfo.isShop == 1 && this.userInfo.businessType == 2 && (this.userInfo.shopType != 3 && this.userInfo.shopType != 4) ) ||
      (this.userInfo.isAgent == 1 && this.userInfo.businessType != 1)
    ) {
      this.oneLevel(1);
    } else {
      this.checkLogin(false, this.getMoreData);
    }
  },
  methods: {
    oneLevel(index) {
      this.oneLevelTab = index;
      if (index == 1) {
        if (this.userInfo.businessType == 1) {
          this.curIndex = 1;
        } else if (this.userInfo.businessType == 2) {
          this.curIndex = 0;
        } else {
          this.curIndex = 2;
        }
      }
      this.checkboxShow = false;
      this.getMoreData();
    },
    details(item) {
      if (this.curIndex == 0) {
        this.goVehicleDetails(item);
      } else if (this.curIndex == 1) {
        this.goHouseDetails(item);
      }
    },
    toAgent(item) {
      if (this.curIndex == 0) {
        if (!item.storeId) {
          this.openUrl({
            path: "/index/goldConsultant",
            query: {
              id: item.publisherId
            }
          });
          return;
        }
        this.goVehicleAgentDetails(item);
      } else if (this.curIndex == 1) {
        if (!item.shopId) {
          this.openUrl({
            path: "/index/goldConsultant",
            query: {
              id: item.user_id || item.userId || item.id
            }
          });
          return;
        }

        this.goHouseAgentDetails(item);
      }
    },
    shopdetails(item) {
      if (this.curIndex == 0) {
        this.goVehicleShopDetails(item);
      } else if (this.curIndex == 1) {
        this.goHouseShopDetails(item);
      }
    },
    tabClick(i) {
      this.collectPage.pageNo = 1;
      this.curIndex = i;
      this.collectList = [];
      this.checkboxShow = false;

      this.getMoreData();
    },
    choosehouse(id) {
      this.collectList.map(item => {
        if (id == item.id) {
          item.choose = !item.choose;
        }
      });
    },
    shangjia() {
      //删除
      var targetArr = this.collectList
        .filter(item => item.choose)
        .map(item => (item.visited || item.visitedLook).id);
      console.log("targetArrtargetArrtargetArr", targetArr);
      if (targetArr.length > 0) {
        this.ids = targetArr;
        this.zbc = true;
        this.shangjiaShow = true;
        // document.documentElement.style.overflow = "hidden";
      } else {
        this.$message({
          message:
            this.curIndex == 0
              ? "请先选择车源！"
              : this.curIndex == 1
                ? "请先选择房源！"
                : "请先选择招聘职位",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    guanShangjia() {
      // 取消
      this.zbc = false;
      this.shangjiaShow = false;
      document.documentElement.style.overflow = "";
    },
    quedingShangjia() {
      this.zbc = false;
      this.shangjiaShow = false;
      this.curIndex == 0
        ? this.deleteCy()
        : this.curIndex == 1
          ? this.deleteCy("/mob/iteration/removeHouseVisited")
          : this.deleteCy("/api/mobile/personnelOwner/removeVisitedLook");

      // 确定
    },
    deleteCy(url = "/api/mobile/vehicleOwner/removeVisited") {
      this.$postHttp(url, {
        ids: this.ids.join(",")
      }).then(res => {
        this.$message({
          message: res.msg,
          type: "success",
          offset: 120,
          duration: 2000
        });
        this.getMoreData();
        this.binaji();
      });
    },

    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.userInfo = user;
        this.user = user;
        this.loginstate = true;
      } else {
        this.loginstate = false;
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        this.$router.push("/");
      }
    },
    binaji() {
      this.checkboxShow = !this.checkboxShow;
    },
    CollectCurrentChange(e) {
      this.collectPage.pageNo = e;
      this.getMoreData();
    },
    getMoreData() {
      if (this.collectPage.userId == "")
        this.collectPage.userId = JSON.parse(
          localStorage.getItem("userInfo")
        ).id;
      this.collectList = [];
      this.collectTotal = 0;
      // 车源
      if (this.curIndex == 0) {
        this.collectPage.businessType = 2;
        this.getCy();
      } else if (this.curIndex == 1) {
        // 房源
        this.collectPage.businessType = 1;
        this.getFy();
      } else if (this.curIndex == 2) {
        // 招聘
        if (this.collectPage.businessType) delete this.collectPage.businessType;
        this.getZp();
      }
    },
    getZp() {
      this.$getHttp("/api/mobile/personnelOwner/getMyVisitedLookHistoryList", {
        ...this.collectPage,
        visitType: 1,
        wetherShowCustomer: this.oneLevelTab == 1 ? "1" : "0"
      }).then(res => {
        res.visitedHistory.pageList.forEach(v => {
          v.choose = false;
        });
        this.collectList = res.visitedHistory.pageList;
        this.collectTotal = res.visitedHistory.pageCount;
      });
    },
    getCy() {
      this.$getHttp("/api/mobile/vehicleOwner/getMyVisitedHistoryList", {
        ...this.collectPage,
        wetherShowCustomer: this.oneLevelTab == 1 ? "1" : "0"
      }).then(res => {
        res.visitedHistory.pageList.forEach(v => {
          v.choose = false;
        });

        this.collectList = res.visitedHistory.pageList;
        this.collectTotal = res.visitedHistory.pageCount;
      });
    },
    getFy() {
      this.$getHttp("/mob/iteration/getMyHouseVisitedHistoryList", {
        ...this.collectPage,
        wetherShowCustomer: this.oneLevelTab == 1 ? "1" : "0"
      }).then(res => {
        res.visitedHistory.pageList.forEach(e => {
          e.choose = false;
          if (e.hasOwnProperty("floor")) {
            if (e.floor.indexOf("|") == -1) {
              e.floor = "";
            } else {
              e.floor =
                e.floor.split("|")[0] +
                "层/" +
                "共" +
                e.floor.split("|")[1] +
                "层";
            }
          }
        });

        this.collectList = res.visitedHistory.pageList;
        this.collectTotal = res.visitedHistory.pageCount;
        console.log("11111111111111111111111111111111111", res.visitedHistory);
      });
    },
    checkLogin(slience = false, callback) {
      if (!this.loginstate) {
        if (!slience) {
          this.$message({
            message: "请先登录！",
            type: "error",
            offset: 120,
            duration: 2000
          });
        }
        return false;
      }
      callback && callback();
      return true;
    }
  }
};
</script>
<style lang="less" scoped>
.box {
  position: relative;
  padding-bottom: 200px;
}

.zbc {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9;

  .shouye {
    position: absolute;
    width: 430px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    color: #333;
    border-radius: 10px;
    overflow: hidden;

    .name {
      margin-top: 40px;
      margin-left: 28px;
      font-size: 20px;

      p {
        display: inline-block;
        vertical-align: top;
      }
    }

    .tian {
      margin-top: 20px;
      margin-left: 28px;

      p {
        display: inline-block;
        vertical-align: middle;
        font-size: 20px;
      }

      .div {
        display: inline-block;
        width: 110px;
        height: 40px;
        background: #ffffff;
        border: 1px solid #64b6a8;
        border-radius: 37px;
        overflow: hidden;
        vertical-align: middle;

        /deep/.el-input__inner {
          border: 0;
          font-size: 20px;
          color: #64b6a8;
          padding: 0 20px;
        }
      }
    }

    .p1 {
      width: 376px;
      font-size: 18px;
      color: #ea4b4b;
      margin-left: 28px;
      margin-top: 25px;
    }

    .quxiao {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 216px;
      height: 65px;
      line-height: 65px;
      background: #f2f2f2;
      color: #333;
      font-size: 21px;
      text-align: center;
      cursor: pointer;
    }

    .queding {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 216px;
      height: 65px;
      line-height: 65px;
      background: #64b6a8;
      color: #fff;
      font-size: 21px;
      text-align: center;
      cursor: pointer;
    }
  }

  .shangjia {
    position: absolute;
    width: 430px;
    height: 216px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    color: #333;
    border-radius: 10px;
    overflow: hidden;

    p {
      font-size: 24px;
      width: 100%;
      margin-top: 58px;
      text-align: center;
    }

    div {
      position: absolute;
      bottom: 40px;
      width: 115px;
      height: 42px;
      box-sizing: border-box;
      border-radius: 22px;
      font-size: 21px;
      text-align: center;
      line-height: 42px;
      cursor: pointer;
    }

    .d1 {
      color: #64b6a8;
      left: 85px;
      border: 1px solid #64b6a8;
    }

    .d2 {
      background-color: #64b6a8;
      color: #fff;
      right: 85px;
    }
  }
}

.con {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  width: 940px;
  color: #333;
  border: 1px solid #e0e0e0;

  .leibie {
    height: 80px;
    border-bottom: 1px solid #e0e0e0;
    padding-left: 40px;
    padding-right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .anniu {
      div {
        display: inline-block;
        margin-right: 54px;
        font-size: 20px;
        cursor: pointer;
      }

      .xuan {
        transform: scale(1.2);
        color: #64b6a8;
      }
    }

    .anniu_right {
      display: flex;
      align-items: center;

      .guanli {
        font-size: 18px;
        font-weight: 400;
        color: #333333;
        margin-right: 20px;
        cursor: pointer;
      }

      .qxsc {
        cursor: pointer;
        width: 97px;
        height: 34px;
        background-color: #ffffff;
        border-radius: 22px;
        border: 1px solid #64b6a8;
        font-size: 18px;
        font-weight: 400;
        color: #64b6a8;
        text-align: center;
        line-height: 34px;
      }
    }
  }

  .cheClass {
    margin-left: 40px;
    margin-top: 20px;

    .li_right {
      display: flex;
      justify-content: space-between;

      .nameList {
        width: 460px;
        display: flex;
        flex-direction: column;
        padding-left: 14px;
        justify-content: space-between;
        cursor: pointer;

        .t_1 {
          font-size: 22px;
          padding-bottom: 12px;
        }

        .t_2 {
          font-size: 18px;
          color: #666666;
          margin-top: 12px;
        }

        .t_4 {
          font-size: 18px;
          color: #666666;

          .t_4_img {
            width: 31px;
            height: 31px;
          }

          div {
            display: inline-block;
            //width: 90px;
            padding: 0px 5px;
            height: 30px;
            background: #ffffff;
            border: 1px solid #64b6a8;
            border-radius: 4px;
            text-align: center;
            line-height: 30px;
            margin-left: 24px;
            color: #64b6a8;
          }
        }
      }

      .storeList {
        width: 460px;
        padding-left: 14px;
        display: flex;
        flex-direction: column;

        .t_1 {
          font-size: 22px;
          padding-bottom: 32px;
        }

        .t_2 {
          font-size: 18px;
          color: #666666;
          margin-top: 12px;
        }
      }

      .li_right_price {
        font-size: 26px;
        font-weight: 600;
        color: #e00000;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .fenye {
    width: 100%;
    height: 50px;
    text-align: center;
    margin-bottom: 50px;
    margin-top: 50px;
  }

  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }
}

.gerenBox {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 32px;
  margin-bottom: 45px;

  .geren {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 240px;
    min-height: 820px;
    margin-right: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;

    img {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      margin-top: 40px;
      margin-left: 65px;
    }

    p {
      width: 100%;
      text-align: center;
      font-size: 18px;
      color: #333333;
      margin-top: 12px;
      margin-bottom: 40px;
    }

    .list {
      position: relative;
      width: 100%;

      .li {
        width: 209px;
        height: 50px;
        line-height: 50px;
        margin-left: 30px;
        text-indent: 40px;
        font-size: 18px;
        color: #333;
        border-radius: 25px 0 0 25px;
        cursor: pointer;
      }

      .xuan {
        background-color: #64b6a8;
        color: #fff;
      }
    }

    .kuai {
      width: 100%;
      height: 6px;
      background-color: #64b6a8;
      position: absolute;
      bottom: 0;
    }
  }
}

.tit {
  width: 100%;
  height: 100px;
  background-color: #f2f2f2;

  .list {
    position: relative;
    width: 1200px;
    margin-left: 50%;
    padding-top: 25px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        width: 60px;
        height: 60px;
      }

      span {
        vertical-align: middle;
      }
    }

    .rig {
      position: absolute;
      right: 0;

      .but {
        width: 200px;
        height: 50px;
        background: #64b6a8;
        border-radius: 6px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        margin-left: 30px;
      }
    }
  }
}

.cheClass {
  position: relative;

  &.my {
    .shangb {
      left: 40px;
    }
  }

  .shangb {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 104px;
    height: 85px;
  }

  .img {
    width: 230px;
    height: 154px;
  }
}

.zbc {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9;

  .shangjia {
    position: absolute;
    width: 430px;
    height: 216px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    color: #333;
    border-radius: 10px;
    overflow: hidden;

    p {
      font-size: 24px;
      width: 100%;
      margin-top: 58px;
      text-align: center;
    }

    div {
      position: absolute;
      bottom: 40px;
      width: 115px;
      height: 42px;
      box-sizing: border-box;
      border-radius: 22px;
      font-size: 21px;
      text-align: center;
      line-height: 42px;
      cursor: pointer;
    }

    .d1 {
      color: #64b6a8;
      left: 85px;
      border: 1px solid #64b6a8;
    }

    .d2 {
      background-color: #64b6a8;
      color: #fff;
      right: 85px;
    }
  }
}

.anniu-ac {
  // width: 86px;
  padding: 6px 0;
  text-align: center;
  line-height: 1;

  &.active {
    font-size: 24px !important;
    font-size: 600 !important;
    color: #64b6a8;
    border-radius: 6px;
    transform-origin: left;
    transform: scale(1.2);
  }
}

.li {
  position: relative;
  margin-bottom: 32px;
  width: 100%;
  cursor: pointer;

  .shangb {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 104px;
    height: 85px;
  }

  .img {
    width: 230px;
    height: 154px;
  }

  .wenzi {
    display: inline-block;
    vertical-align: top;
    width: 350px;
    height: 154px;
    margin-left: 14px;

    .p1 {
      font-size: 20px;
      color: #333333;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .p2 {
      font-size: 14px;
      color: #666666;
      margin-top: 8px;
      margin-bottom: 8px;
    }

    .p3 {
      font-size: 14px;
      color: #666666;
    }

    .p4 {
      position: absolute;
      bottom: 0;

      img {
        width: 30px;
        height: 30px;
        cursor: pointer;
        border-radius: 30px;
      }

      span {
        display: inline-block;
        font-size: 14px;
        /* max-width: 100px; */
        vertical-align: middle;
        cursor: pointer;
      }

      .gong {
        display: inline-block;
        //width: 68px;
        height: 23px;
        background: #ffffff;
        border: 1px solid #64b6a8;
        border-radius: 4px;
        text-align: center;
        line-height: 23px;
        color: #64b6a8;
        margin-left: 10px;
        cursor: pointer;
        padding: 0 5px;
      }
    }

    .p5 {
      position: absolute;
      bottom: 0;
      color: #666666;
    }

    .p6 {
      position: absolute;
      bottom: 0;

      span {
        font-size: 14px;
        display: block;
        margin-top: 10px;
      }
    }
  }

  .jiage {
    position: absolute;
    width: 140px;
    top: 45px;
    right: 24px;

    p {
      text-align: center;
    }

    .p1 {
      font-size: 26px;
      color: red;
    }

    .p2 {
      font-size: 12px;
      color: #333;
      margin-top: 10px;
    }
  }

  .el-checkbox {
    vertical-align: middle;
    margin-right: 20px;
  }

  /deep/.el-checkbox__inner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
  }

  /deep/.el-checkbox__inner::after {
    border: 2px solid #fff;
    width: 8px;
    height: 18px;
    left: 11px;
    top: 4px;
    border-left: 0;
    border-top: 0;
  }

  /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
  /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #64b6a8;
    border-color: #64b6a8;
  }
}
</style>
